<template>
	<view class="container">
		<view class="cu-card panel-user">
			<view class="cu-item">
				<view class="user-title"><text class="txt">{{userInfo.roleTypeName}}登陆</text></view>
				<view class="padding flex align-center">
					<view class="cu-avatar lg round" 
						style="background-image:url(../../static/yonghu.png);"></view>
					<view class="margin-left-sm flex-twice text-sm">
						<view>{{userInfo.nickname}}</view>
						<view>{{$utils.dataDesensitization(userInfo.phone)}}</view>
						<view>联系人：{{userInfo.superior}}</view>
					</view>
					<view class="flex flex-direction">
						<button class="cu-btn sm bg-orange" @click="toMine()">个人中心</button>
						<button class="cu-btn sm margin-top" @click="toLoginChange()">切换账号</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 除店员没有钱包，其它角色都有钱包 -->
		<view class="bg-white margin-top-sm margin-left margin-right padding-sm radius" v-if="userInfo.roleType != 5">
			<view class="flex justify-between solid-bottom padding-bottom-xs">
				<view class="text-bold">当前账号钱包</view>
				<view class="flex-sub text-right flex align-end justify-end">
					<button class="cu-btn bg-orange sm" @click="toWalletInfo()">个人钱包</button>
				</view>
			</view>
			<view class="flex">
				<view class="flex-sub text-center">
					<view class="text-sm margin-top-sm">钱包余额</view>
					<view class="text-lg margin-top-sm">{{walletInfo.money}}</view>
				</view>
				<view class="flex-sub text-center">
					<view class="text-sm margin-top-sm">已转出金额</view>
					<view class="text-lg margin-top-sm">{{walletInfo.withdrawnMoney}}</view>
				</view>
			</view>
		</view>
		<view class="cu-card panel-apps margin-top-sm">
			<view class="cu-item">
				<view class="cu-list grid col-4 no-border">
					<view class="cu-item" @click="btnScan()">
					  <view class="icon-tag"><image src="/static/icons/icon_scan.png" mode="aspectFit"></image></view>
					  <text>扫一扫</text>
					</view>
					<view class="cu-item" v-for="(item,index) in appListData" :key="index" @click="$utils.toURL(item.url)">
					  <view class="icon-tag"><image :src="resDomain + item.iconImg" mode="aspectFit"></image></view>
					  <text>{{item.name}}</text>
					</view>
					<!--
					<view class="cu-item">
					  <view class="icon-tag"><image src="/static/icons/icon_more.png" mode="aspectFit"></image></view>
					  <text>更多</text>
					</view>
					-->
				</view>
			</view>
		</view>
		<view class="list-header bg-white margin-left margin-right">
		    <view class="solid-bottom">
		        <view class="cu-bar search">
		            <view class="search-form round">
		                <text class="cuIcon-search"></text>
		                <input type="text" placeholder="搜索网点名称" v-model="keyword"></input>
		            </view>
		            <view class="action">
		                <button class="cu-btn bg-orange shadow-blur round" @click="btnSearch()">搜索</button>
		            </view>
		        </view>
		    </view>
		</view>
		<view class="list-body">
			<view class="cu-card article">
				<view class="cu-item" v-for="(item,index) in listData" :key="index">
					<view @click="toPlaceInfo(item)">
						<view class="title">
							<view class="text-cut text-orange">{{item.name}}</view>
						</view>
						<view class="content">
							<view class="solids margin-right-sm"><image :src="item.imgUrl?item.imgUrl:'/static/logo.jpg'" mode="aspectFill"></image></view>
							<view class="text-cut">
								<view>类型：{{item.typeNames}}</view>
								<view>地区：{{item.province}}-{{item.city}}-{{item.cityArea}}</view>
								<view>网点关系：{{item.roleTypeName}}</view>
								<view>创建时间：{{item.createDate}}</view>
							</view>
						</view>
						<view class="flex justify-around margin-top">
							<view class="text-center text-sm">
								<view>在线设备/部署设备</view>
								<view class="margin-top-sm">
									<text class="text-orange">{{item.onlineDeviceCount || 0 }}</text>/{{item.deviceCount || 0 }}
								</view>
							</view>
							<view class="solid-right"></view>
							<view class="text-center text-sm">
								<view>今日订单</view>
								<view class="margin-top-sm">{{item.incomeCount || 0}}单</view>
							</view>
							<view class="solid-right"></view>
							<view class="text-center text-sm">
								<view>今日收益</view>
								<view class="margin-top-sm">{{item.incomeMoneyStr || 0}}元</view>
							</view>
						</view>
						<button class="cu-btn line-orange btn-info"><text class="cuIcon-searchlist"></text></button>
					</view>
				</view>
			</view>
			<view class="foot"><text class="ftxt">我也是有底线的</text></view>
		</view>
	</view>
</template>

<script>
	const wx = require('@/js_sdk/jweixin.js'); 
	export default {
		data() {
			return {
				appListData:[],
				walletInfo:{
					money:'0.0',
					withdrawnMoney:'0.0',
					items:[]
				},
				resDomain:this.$store.getters.GET_resDomain,
				userInfo:this.$store.getters.GET_userInfo || {},
				listData:[],
				keyword:'',
				pageNo:1,
				modalName:null
			};
		},
		onLoad(option) {
			console.log(this.userInfo);
			this._loadWalletInfo();
			this._loadAppListData();
			this._loadPlaceListData();
		},
		onShow(){
			this._jssdk();
		},
		methods:{
			_jssdk(){
				let url = location.href.split('#')[0];
				const api = this.$request;
				api.post(api.url.wxSDK,{
					appId:this.$store.getters.GET_AppId,
					url:url
				},res=>{
					console.log(res)
					if(res.code==200){
						const data = res.body;
						wx.config({
						  debug: false,
						  appId: data.config.appId,        // 必填，公众号的唯一标识
						  timestamp: data.config.timestamp,// 必填，生成签名的时间戳
						  nonceStr: data.config.nonceStr,  // 必填，生成签名的随机串
						  signature: data.config.signature,// 必填，签名
						  jsApiList: ['scanQRCode']        // 必填，需要使用的JS接口列表
						});
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else {
						uni.showToast({
							title:'初始化失败',
							icon:'error'
						})
					}
				})
			},
			//获取功能项
			_loadAppListData:function(){
				const _self = this;
				const api = this.$request;
				api.post(api.url.funcModelList,{},res=>{
					console.log(res);
					if(res.code == 200){
						_self.appListData = res.body.items || [];
					}
				})
			},
			//获取我的钱包信息
			_loadWalletInfo:function(){
				if(this.userInfo.roleType != 5){
					const _self = this;
					const api = this.$request;
					api.post(api.url.teamUserWalletInfo,{},res=>{
						console.log(res);
						if(res.code == 200){
							_self.walletInfo = res.body;
						}else if(res.code == 202){
							//不做任何事
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else {
							uni.showToast({
								title:'获取钱包失败',
								icon:'error'
							})
						}
					})
				}
			},
			_loadPlaceListData:function(){
				if(this.pageNo > 0){
					const _self = this;
					const api = this.$request;
					api.post(api.url.placeList,{
						trim:this.keyword,
						pageNo:this.pageNo
					},(res)=>{
						if(res.code == 200){
							_self.listData = _self.listData.concat(res.body.items);
							_self.pageNo = _self.pageNo+1;
						}else if(res.code == 202){
							_self.pageNo = -1;
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
					})
				}
			},
			btnScan(){
				const _self = this;
				wx.ready(()=>{
					wx.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: function (res) {
							console.log(res.resultStr);
							$common.toPageByScan(res.resultStr);
						}
					})
				})
			},
			btnSearch:function(){
				this.pageNo=1;
				this.listData=[];
				this._loadPlaceListData();
			},
			btnHideModal:function(){
				this.modalName = null;
			},
			toWalletInfo:function(){
				uni.navigateTo({
					url:'/pages/mine/wallet/index'
				})
			},
			toMine:function(){
				uni.navigateTo({
					url:'/pages/mine/mine'
				})
			},
			toLoginChange:function(){
				uni.navigateTo({
					url:'/pages/login/change'
				})
			},
			toPlaceInfo:function(item){
				uni.navigateTo({
					url:'/pages/place/info?id='+item.id
				})
			}
		}
	}
</script>

<style lang="less">
.container .panel-apps .cu-item{margin-top:0;}
.container .panel-apps .icon-tag{border-radius:50%;width:86rpx;height:86rpx;margin: 0 auto 5rpx;background-color: #fff6e7;
	display:flex;justify-content:center;align-items:center;}
.container .panel-apps .icon-tag image{width:58rpx;height:58rpx;}
.container .panel-apps .grid>.cu-item text{margin-top:0;font-size:24rpx;}
.container .panel-user .cu-item{border-radius:20rpx;margin-bottom:0;}
.container .panel-user .cu-item .flex-twice view{padding-top:5rpx;}

.list-body .cu-card>.cu-item{position:relative;margin-top:0;border-radius:0;}
.list-body .cu-card>.cu-item .title{line-height:80rpx;}
.list-body .cu-card>.cu-item .btn-info{position:absolute;top:0;right:0;border:0;font-size:42rpx;}
.list-body .cu-card>.cu-item .btn-info::after{border:0;}
.list-body .cu-card>.cu-item .content{font-size:26rpx;}
.list-body .cu-card>.cu-item .content image{width:160rpx;height:160rpx;}
.list-body .cu-card>.cu-item .content view{padding-top:2rpx;padding-bottom:2rpx;}

.user-title{
	background-color: white;
	color: white;
	font-size: 20rpx;
	position: relative;
	&::before{
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 80%;
		height: 20%;
		background-color: #ed6a3e;
	}
	.txt{
		display: inline-block;
		width: 20%;
		text-align: center;
		padding:10rpx 0;
		background: linear-gradient(160deg,#fa9454,#e65332);
		border-radius: 20rpx 0 20rpx 0;
		position: relative;
		&::before,&::after{
			content: "";
			display: block;
			position: absolute;
			right: -20rpx;
			width: 20rpx;
		}
		&::before{
			top: 20%;
			height: 20rpx;
			background-color: #ed6a3e;
			z-index: 100;
		}
		&::after{
			bottom: 0;
			height: 80%;
			background-color: white;
			border-radius: 20rpx 0 0 0;
			z-index: 200;
		}
	}
}
</style>
